import BaseRenderer from 'diagram-js/lib/draw/BaseRenderer';
import {
  append as svgAppend,
  attr as svgAttr,
  create as svgCreate,
} from 'tiny-svg';
import { is } from 'bpmn-js/lib/util/ModelUtil';
import { isAny } from 'bpmn-js/lib/features/modeling/util/ModelingUtil';

const HIGH_PRIORITY = 1500;

export default class CustomRenderer extends BaseRenderer {
    constructor(eventBus, bpmnRenderer) {
        super(eventBus, HIGH_PRIORITY);
        this.bpmnRenderer = bpmnRenderer;
    }
    
    canRender(element) {
        return isAny(element, [ 'bpmn:Task', 'bpmn:Event', 'bpmn:Gateway', 'bpmn:Activity', 'bpmn:Participant' ]) && !element.labelTarget;
    }

    drawShape(parentNode, element) {
        const shape = this.bpmnRenderer.drawShape(parentNode, element);
        if (is(element, 'bpmn:StartEvent')) {
            shape.style.setProperty('stroke','#3fd574')
            return shape;
        } else if (is(element, 'bpmn:EndEvent')) {
            shape.style.setProperty('stroke','#f96666')
            shape.style.setProperty('stroke-width','6px')
            return shape;
        } else if (is(element, 'bpmn:ExclusiveGateway') || is(element, 'bpmn:InclusiveGateway') || is(element, 'bpmn:ParallelGateway') || is(element, 'bpmn:ComplexGateway') || is(element, 'bpmn:EventBasedGateway')) {
            shape.style.setProperty('stroke','#fbaf3e')
            let pathList = parentNode.getElementsByTagName('path')
            pathList?.forEach(item => {
                item.style.setProperty('stroke','#fbaf3e')
                item.style.setProperty('fill','#fbaf3e')
            })
            let circleList = parentNode.getElementsByTagName('circle')
            circleList?.forEach(item => {
                item.style.setProperty('stroke','#fbaf3e')
            })
            return shape;
        } else if (is(element, 'bpmn:Activity')) {
            shape.style.setProperty('stroke','#167cf3')
            let pathList =  parentNode.getElementsByTagName('path')
            pathList?.forEach(item => {
                item.style.setProperty('stroke','#167cf3')
            })
            let textList =  parentNode.getElementsByTagName('text')
            textList?.forEach(item => {
                item.style.setProperty('fill','#167cf3')
            })
            return shape;
        } else if (is(element, 'bpmn:Participant')) {
            shape.style.setProperty('stroke','#167cf3')
            let polylineList =  parentNode.getElementsByTagName('polyline')
            polylineList?.forEach(item => {
                item.style.setProperty('stroke','#167cf3')
            })
            return shape;
        } else {
            shape.style.setProperty('stroke','#167cf3')
            let pathList =  parentNode.getElementsByTagName('path')
            pathList?.forEach(item => {
                item.style.setProperty('stroke','#167cf3')
            })
            let circleList = parentNode.getElementsByTagName('circle')
            circleList?.forEach(item => {
                item.style.setProperty('stroke','#167cf3')
                item.style.setProperty('stroke-width','2px')
            })
            return shape;
        }
    }
}

CustomRenderer.$inject = [ 'eventBus', 'bpmnRenderer' ];

function drawRect(parentNode, width, height, borderRadius, strokeColor) {
    const rect = svgCreate('rect');

    svgAttr(rect, {
        width: width,
        height: height,
        rx: borderRadius,
        ry: borderRadius,
        stroke: strokeColor || '#000',
        strokeWidth: 2,
        fill: '#fff'
    });

    svgAppend(parentNode, rect);

    return rect;
}

function prependTo(newNode, parentNode, siblingNode) {
    parentNode.insertBefore(newNode, siblingNode || parentNode.firstChild);
}